home *** CD-ROM | disk | FTP | other *** search
/ PC World 2008 February (DVD) / PCWorld_2008-02_DVD.iso / v cisle / PHP / PHP.exe / EasyPHP-2.0b1-setup.exe / {app} / sqlitemanager / jscalendar / calendar-system.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2006-04-18  |  5.6 KB  |  252 lines
  1. /* The main calendar widget.  DIV containing a table. */
  2.  
  3. .calendar {
  4.   position: relative;
  5.   display: none;
  6.   border: 1px solid;
  7.   border-color: #fff #000 #000 #fff;
  8.   font-size: 11px;
  9.   cursor: default;
  10.   background: Window;
  11.   color: WindowText;
  12.   font-family: tahoma,verdana,sans-serif;
  13. }
  14.  
  15. .calendar table {
  16.   border: 1px solid;
  17.   border-color: #fff #000 #000 #fff;
  18.   font-size: 11px;
  19.   cursor: default;
  20.   background: Window;
  21.   color: WindowText;
  22.   font-family: tahoma,verdana,sans-serif;
  23. }
  24.  
  25. /* Header part -- contains navigation buttons and day names. */
  26.  
  27. .calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  28.   text-align: center;
  29.   padding: 1px;
  30.   border: 1px solid;
  31.   border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
  32.   background: ButtonFace;
  33. }
  34.  
  35. .calendar .nav {
  36.   background: ButtonFace url(menuarrow.gif) no-repeat 100% 100%;
  37. }
  38.  
  39. .calendar thead .title { /* This holds the current "month, year" */
  40.   font-weight: bold;
  41.   padding: 1px;
  42.   border: 1px solid #000;
  43.   background: ActiveCaption;
  44.   color: CaptionText;
  45.   text-align: center;
  46. }
  47.  
  48. .calendar thead .headrow { /* Row <TR> containing navigation buttons */
  49. }
  50.  
  51. .calendar thead .daynames { /* Row <TR> containing the day names */
  52. }
  53.  
  54. .calendar thead .name { /* Cells <TD> containing the day names */
  55.   border-bottom: 1px solid ButtonShadow;
  56.   padding: 2px;
  57.   text-align: center;
  58.   background: ButtonFace;
  59.   color: ButtonText;
  60. }
  61.  
  62. .calendar thead .weekend { /* How a weekend day name shows in header */
  63.   color: #f00;
  64. }
  65.  
  66. .calendar thead .hilite { /* How do the buttons in header appear when hover */
  67.   border: 2px solid;
  68.   padding: 0px;
  69.   border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
  70. }
  71.  
  72. .calendar thead .active { /* Active (pressed) buttons in header */
  73.   border-width: 1px;
  74.   padding: 2px 0px 0px 2px;
  75.   border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
  76. }
  77.  
  78. /* The body part -- contains all the days in month. */
  79.  
  80. .calendar tbody .day { /* Cells <TD> containing month days dates */
  81.   width: 2em;
  82.   text-align: right;
  83.   padding: 2px 4px 2px 2px;
  84. }
  85. .calendar tbody .day.othermonth {
  86.   font-size: 80%;
  87.   color: #aaa;
  88. }
  89. .calendar tbody .day.othermonth.oweekend {
  90.   color: #faa;
  91. }
  92.  
  93. .calendar table .wn {
  94.   padding: 2px 3px 2px 2px;
  95.   border-right: 1px solid ButtonShadow;
  96.   background: ButtonFace;
  97.   color: ButtonText;
  98. }
  99.  
  100. .calendar tbody .rowhilite td {
  101.   background: Highlight;
  102.   color: HighlightText;
  103. }
  104.  
  105. .calendar tbody td.hilite { /* Hovered cells <TD> */
  106.   padding: 1px 3px 1px 1px;
  107.   border-top: 1px solid #fff;
  108.   border-right: 1px solid #000;
  109.   border-bottom: 1px solid #000;
  110.   border-left: 1px solid #fff;
  111. }
  112.  
  113. .calendar tbody td.active { /* Active (pressed) cells <TD> */
  114.   padding: 2px 2px 0px 2px;
  115.   border: 1px solid;
  116.   border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
  117. }
  118.  
  119. .calendar tbody td.selected { /* Cell showing selected date */
  120.   font-weight: bold;
  121.   border: 1px solid;
  122.   border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
  123.   padding: 2px 2px 0px 2px;
  124.   background: ButtonFace;
  125.   color: ButtonText;
  126. }
  127.  
  128. .calendar tbody td.weekend { /* Cells showing weekend days */
  129.   color: #f00;
  130. }
  131.  
  132. .calendar tbody td.today { /* Cell showing today date */
  133.   font-weight: bold;
  134.   color: #00f;
  135. }
  136.  
  137. .calendar tbody td.disabled { color: GrayText; }
  138.  
  139. .calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
  140.   visibility: hidden;
  141. }
  142.  
  143. .calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
  144.   display: none;
  145. }
  146.  
  147. /* The footer part -- status bar and "Close" button */
  148.  
  149. .calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
  150. }
  151.  
  152. .calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  153.   background: ButtonFace;
  154.   padding: 1px;
  155.   border: 1px solid;
  156.   border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
  157.   color: ButtonText;
  158.   text-align: center;
  159. }
  160.  
  161. .calendar tfoot .hilite { /* Hover style for buttons in footer */
  162.   border-top: 1px solid #fff;
  163.   border-right: 1px solid #000;
  164.   border-bottom: 1px solid #000;
  165.   border-left: 1px solid #fff;
  166.   padding: 1px;
  167.   background: #e4e0d8;
  168. }
  169.  
  170. .calendar tfoot .active { /* Active (pressed) style for buttons in footer */
  171.   padding: 2px 0px 0px 2px;
  172.   border-top: 1px solid #000;
  173.   border-right: 1px solid #fff;
  174.   border-bottom: 1px solid #fff;
  175.   border-left: 1px solid #000;
  176. }
  177.  
  178. /* Combo boxes (menus that display months/years for direct selection) */
  179.  
  180. .calendar .combo {
  181.   position: absolute;
  182.   display: none;
  183.   width: 4em;
  184.   top: 0px;
  185.   left: 0px;
  186.   cursor: default;
  187.   border: 1px solid;
  188.   border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
  189.   background: Menu;
  190.   color: MenuText;
  191.   font-size: 90%;
  192.   padding: 1px;
  193.   z-index: 100;
  194. }
  195.  
  196. .calendar .combo .label,
  197. .calendar .combo .label-IEfix {
  198.   text-align: center;
  199.   padding: 1px;
  200. }
  201.  
  202. .calendar .combo .label-IEfix {
  203.   width: 4em;
  204. }
  205.  
  206. .calendar .combo .active {
  207.   padding: 0px;
  208.   border: 1px solid #000;
  209. }
  210.  
  211. .calendar .combo .hilite {
  212.   background: Highlight;
  213.   color: HighlightText;
  214. }
  215.  
  216. .calendar td.time {
  217.   border-top: 1px solid ButtonShadow;
  218.   padding: 1px 0px;
  219.   text-align: center;
  220.   background-color: ButtonFace;
  221. }
  222.  
  223. .calendar td.time .hour,
  224. .calendar td.time .minute,
  225. .calendar td.time .ampm {
  226.   padding: 0px 3px 0px 4px;
  227.   border: 1px solid #889;
  228.   font-weight: bold;
  229.   background-color: Menu;
  230. }
  231.  
  232. .calendar td.time .ampm {
  233.   text-align: center;
  234. }
  235.  
  236. .calendar td.time .colon {
  237.   padding: 0px 2px 0px 3px;
  238.   font-weight: bold;
  239. }
  240.  
  241. .calendar td.time span.hilite {
  242.   border-color: #000;
  243.   background-color: Highlight;
  244.   color: HighlightText;
  245. }
  246.  
  247. .calendar td.time span.active {
  248.   border-color: #f00;
  249.   background-color: #000;
  250.   color: #0f0;
  251. }
  252.